<template>
    <div>
        <!-- 2. 生命周期 -->
        <p ref="op">{{num}}</p>
        <button @click="add">按钮</button>
        <hr>
        <child v-if="isShow"></child>
        <button @click="isShow = !isShow">毁灭吧！！</button>
    </div>
</template> 
 
<script>
import child from './Comp2Child.vue'
export default {
    name:'',
    components: {
        child
    },
    props: {

    },
    data() {
        return {
            num:20,
            isShow: true
        };
    },

    // 注意： 1.以下钩子函数名称为固定写法不能更换  2.顺序可以颠倒，但是执行顺序还是一样！ 3.钩子函数和data(methods)在同一个层级

    // 第一阶段： 创建阶段  创建了组件，并把函数和数据绑定到组件对象上
    beforeCreate(){
        // 创建前
        // this 指向这个组件
        console.log('1.1 beforeCreate---',this.num, this.add, this.$refs.op) // 三个都是undefined
    },
    created() {
        // 创建完成
        console.log('1.2 created---',this.num, this.add, this.$refs.op) // 20  函数  undefined 

        // !!因为这个阶段开始就可以操作数据，一般会将一些ajax的请求放在这里！
        // 如果把请求放在mounted，那么又要重新准备模板然后渲染，做了重复工不太好..
    },
    // created之后，beforeMount之前  会在内存中准备模板
    // 第二阶段:挂载阶段  把内存中编译好的模板，放在页面中展示。挂载完成后就可以通过界面来获取元素数据
    beforeMount(){
        // 挂载前
        // this.$refs.op 是通过界面来获取，而再挂载之前只是把模板准备好放在内存中，还没挂载（展示）在页面中
        console.log('2.1 beforeMount---',this.num, this.add, this.$refs.op) // 20  函数  undefined
    },
    mounted() {
        // 挂载完成
        console.log('2.2 mounted---',this.num, this.add, this.$refs.op) // 20  函数  dom对象 (三个都有值了！)
    },
    // 第三阶段:更新阶段  界面更新就会触发
    beforeUpdate(){ 
        console.log('3.1 beforeUpdate---',
            this.num,
            this.add,
            this.$refs.op.innerHTML)     // 21   函数  20
    },
    updated(){
        console.log('3.2 updated---',
        this.num,
        this.add,
        this.$refs.op.innerHTML)        // 21   函数  21
    },
    methods: {
        add(){
            this.num++
        }
    },
    computed: {

    },
    
    watch: {

    },
};
</script>

<style scoped lang="less">

</style>
